<template>
  <div class="login_container">
    <div class="logo_wrap">
      <el-image
        style="width: 80px; height: 80px"
        :src="require('@/assets/img/logo.png')"
        fit="cover"
      ></el-image>
    </div>
    <div class="tip">登录网易云账号</div>
    <div class="input_wrap">
      <el-input placeholder="手机号" v-model="phone">
        <i slot="prefix" class="iconfont icon-shouji"></i>
      </el-input>
      <el-input
        v-show="!toSms"
        type="password"
        placeholder="密码"
        v-model="password"
      >
        <i slot="prefix" class="iconfont icon-suoding"></i>
      </el-input>
      <el-input v-show="toSms" type="text" placeholder="验证码" v-model="sms">
        <i slot="prefix" class="iconfont icon-yanzhengma"></i>
        <div @click="getCaptcha" v-show="!isSend" slot="append">获取验证码</div>
        <div v-show="isSend" slot="append">{{ countdown }}</div>
      </el-input>

      <div @click="submit" class="login_btn">登录</div>
      <div class="accord">
        <div v-show="!toSms" @click="toSms = !toSms" class="tosms">
          短信登录
        </div>
        <div v-show="toSms" @click="toSms = !toSms" class="tosms">密码登录</div>
        <div class="own">
          <el-checkbox v-model="checked">自动登录</el-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLogin, getCaptcha } from "@/util/userinfo.js";
export default {
  name: "Login",

  data() {
    return {
      phone: "",
      password: "",
      sms: "",
      checked: false,
      toSms: false,
      isSend: false,
      countdown: "60",
      timer: null,
    };
  },

  mounted() {},

  methods: {
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
    //登录
    async submit() {
      //短信登录
      if (this.sms) {
        let { phone, password, sms } = this;
        let res = await getLogin(phone, password, sms);
        this.sms = "";
        if (res.data.code !== 200) {
          return this.$message.error("登陆失败,请检查登录信息!");
        }
        this.$message.success("登陆成功");

        //保存用户信息
        this.$store.dispatch("userInfo/saveUserInfo", res.data.profile);
        sessionStorage.setItem("userinfo", JSON.stringify(res.data.profile));
        //保存用户id
        this.$store.dispatch("userInfo/saveUserId", res.data.profile.userId);
        sessionStorage.setItem("userId", res.data.profile.userId);

        //保存登录状态
        this.$store.dispatch("userInfo/saveLoginStatus", "true");
        sessionStorage.setItem("loginStatus", "true");

        sessionStorage.setItem("cookie", res.data.cookie);
        this.$router.push("/libaray");
      } else {
        let { phone, password } = this;
        var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (myreg.test(phone)) {
          let res = await getLogin(phone, password);
          if (res.data.code !== 200) {
            this.$message(res.data.msg);
          } else {
            this.$message({
              type: "success",
              message: "登录成功",
            });
            //保存用户信息
            this.$store.dispatch("userInfo/saveUserInfo", res.data.profile);
            sessionStorage.setItem(
              "userinfo",
              JSON.stringify(res.data.profile)
            );
            //保存用户id
            this.$store.dispatch(
              "userInfo/saveUserId",
              res.data.profile.userId
            );
            sessionStorage.setItem("userId", res.data.profile.userId);

            //保存登录状态
            this.$store.dispatch("userInfo/saveLoginStatus", "true");
            sessionStorage.setItem("loginStatus", "true");

            sessionStorage.setItem("cookie", res.data.cookie);

            //判断复选框是否被勾选 勾选则调用配置cookie方法
            if (this.checked == true) {
              //传入账号名，密码，和保存天数3个参数
              this.setCookie(phone, password, 5);
            } else {
              // console.log("清空Cookie");
              //清空Cookie
              this.clearCookie();
            }
            // console.log(res);
            this.$router.push("/libaray");
          }
        } else {
          this.$message("请输入正确的手机号");
        }
      }
    },
    loading() {
      this.countdown--;
      if (this.countdown == 0) {
        this.isSend = false;
      }
    },
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
    //获取验证码xjn
    async getCaptcha() {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (myreg.test(this.phone)) {
        let res = await getCaptcha(this.phone);
        console.log(res);
        this.isSend = true;
        let that = this;
        that.loading();
        that.timer = setInterval(() => {
          if (that.countdown === 0) {
            that.clearTimer();
            this.isSend = false;
          } else {
            that.loading();
          }
        }, 1000);
      } else {
        this.$message("请输入正确的手机号");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login_container {
  height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .logo_wrap {
    margin-top: 80px;
    padding: 50px 0;
  }
  .tip {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 50px;
  }
  .input_wrap {
    width: 30%;
    display: flex;
    flex-direction: column;
    height: 300px;
    align-items: center;
    .el-input {
      width: 80%;
      margin-bottom: 20px;
      i {
        font-size: 20px;
        padding: 0;
        line-height: 43px;
      }
      /deep/.el-input-group__append {
        border: none;
        background-color: #eaeffd;
        border-radius: 0;
        cursor: pointer;
        transition: all 0.5s;
        &:hover {
          background-color: rgba(20, 56, 134, 0.349);
          color: #fff;
        }
        &:active {
          transform: scale(0.1);
        }
      }
    }
    /deep/ .el-input__inner {
      height: 45px;
      line-height: 45px;
      border: none;
      border-radius: 5px;
      background-color: #f2f2f4;
      color: cornflowerblue;
      font-size: 18px;
      font-weight: 600;
      // background-color: #e13e3e;
    }
    .accord {
      margin-top: 20px;
      display: flex;
      width: 100%;
      justify-content: space-around;
      div {
        cursor: pointer;
        font-size: 15px;
        background-color: #eaeffd;
        color: #335eea;
        padding: 5px 20px;
        border-radius: 10px;
        font-weight: 600;
      }
      .tosms {
        background-color: #eaeffd;
        color: #335eea;
        padding: 5px 20px;
        border-radius: 10px;
        font-weight: 600;
        &:hover {
          transform: scale(1.05);
        }
        &:active {
          transform: scale(0.9);
        }
      }
    }
    .login_btn {
      height: 45px;
      background-color: #eaeffd;
      width: 80%;
      border-radius: 8px;
      line-height: 45px;
      text-align: center;
      margin-top: 20px;
      font-size: 18px;
      font-weight: 600;
      color: #335eea;
      transition: all 0.5s;
      cursor: pointer;
      &:hover {
        transform: scale(1.1);
      }
      &:active {
        transform: scale(0.9);
      }
    }
  }
}
</style>